<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../DataTables-1.9.4/media/css/demo_page.css";
			@import "../DataTables-1.9.4/media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts-more.js"></script>
		<script src="../Highcharts-3.0.1/js/modules/exporting.js"></script>
		<script src="../TrackTables-0.0.1/tracktables2.js"></script>
				<script>


					/* Data set */

									NameIndex = [0];
								    ChartColnames = ["Name",'Peaks', 'Genes',
								                   'PeaksInGenes', 'Motifs', 'Co-occur',
								                   "BigWig",
								                   1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,41,42,43,44,45,46,47,48,49,51,
								                   "Samples","Inputs",
								                   ];

								    Data=[
								    ["Tom",5,3,10,7,2,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S13-AR-CHIP-LNCAP-LM-HES6-BICALUTAMIDE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,4,4,4,5,5,5,3,3,3,3,3,2,2,2,2,2,1,1,1,1,0.8,10,12,13,18,20],
								    ["Bill",2, 2, 3,2, 1,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S11-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,10,12,14,18,20],
								    ["Ted",3, 4, 4, 2, 5,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S12-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,9,9,4,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1.3,0.3,10,12,15,18,20]
								    ];

var allChartIndicies = [[1,2,3,5],[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],[53,54],[55,56,57,58,59]]
var allChartNames = ["#container2","#container3","#container4","#container5"]

var allTableIndicies = [[0,1,2,3,4]]
var allTableNames = [["#dynamic","#example"]]
var allChartTypes = ["barchart","linechart","bubblechart","boxplot"]



								  	ChartIndex =[1,2,3,5];
									var Trial = '#container2'

								  	//var crazy;
									var crazyarray = new Array(allTableNames.length);

									var Trial2 = '#dynamic'
									var Trial3 = "#example"
								  	ChartIndex2 =[0,1,2,3,4];

								  	ChartIndex3 =[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51];
									var Trial4 = '#container3'

								  	ChartIndex4 =[53,54];
									var Trial5 = '#container4'

									ChartIndex5 =[55,56,57,58,59];
									var Trial6 = '#container5'


//var nameIndex = [0];
//var chartColnames = ["Name",'Peaks', 'Genes','PeaksInGenes', 'Motifs', 'Co-occur',"BigWig",								                   1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,41,42,43,44,45,46,47,48,49,51,
//"Samples","Inputs",
//];

//var data=
//[
//["Tom",5,3,10,7,2,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S13-AR-CHIP-LNCAP-LM-HES6-//BICALUTAMIDE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,4,4,4,5,5,5,3,3,3,3,3,2,2,2,2,2,1,1,1,1,0.8,10,12,13,18,20],
//["Bill",2, 2, 3,2, 1,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S11-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,10,12,14,18,20],
//["Ted",3, 4, 4, 2, 5,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S12-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,9,9,4,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1.3,0.3,10,12,15,18,20]
//];












$(document).ready(function() {

			var hightablesObj = new HighTables(Data,NameIndex,ChartColnames,allChartNames,allChartIndicies,allTableNames,allTableIndicies,allChartTypes)
			//console.log(hightablesObj.tableNames)
			//console.log(hightablesObj.tableNames.length)

			for (j=0;j<hightablesObj.tableNames.length;j++)
			{
				//console.log(j)
				dataTable = make2dArrayForDataTable(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.tableIndicies[j],hightablesObj.nameIndex)
				crazyarray[j] = makeDataTable(dataTable,hightablesObj.tableNames[j][0],hightablesObj.tableNames[j][1],functionAtRedraw,j,"a")
				//crazy = makeDataTable(dataTable,hightablesObj.tableNames[j][0],hightablesObj.tableNames[j][1],functionAtRedraw,"")
				console.log(crazyarray[j].fnSettings())
			}

			var ChartIndiciesBar = find("barchart",hightablesObj.chartTypes)
			var ChartIndiciesBubble = find("bubblechart",hightablesObj.chartTypes)
			var ChartIndiciesBox = find("boxplot",hightablesObj.chartTypes)
			var ChartIndiciesLine = find("linechart",hightablesObj.chartTypes)

			console.log(crazyarray[0])

			for (j=0;j<ChartIndiciesBar.length;j++)
			{
				highChart = make2dArrayForHighChartsBar(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBar[j]],hightablesObj.nameIndex)
				makeHighChartBar(highChart,hightablesObj.chartNames[ChartIndiciesBar[j]])
			}
			for (j=0;j<ChartIndiciesBubble.length;j++)
			{
			highChartBubbleByCat = make2dArrayForHighChartsBubbles(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBubble[j]],hightablesObj.nameIndex)
			makeHighChartBubbleByCategory(highChartBubbleByCat,hightablesObj.chartNames[ChartIndiciesBubble[j]])
			}


			for (j=0;j<ChartIndiciesBox.length;j++)
			{
			//console.log(hightablesObj.chartIndicies[ChartIndiciesBox[j]])
			highChartBoxPlot = make2dArrayForHighChartsBoxplot(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBox[j]],hightablesObj.nameIndex)
			//console.log(highChartBoxPlot)
			makeHighChartBoxPlot(highChartBoxPlot,hightablesObj.chartNames[ChartIndiciesBox[[j]]])
			}


			for (j=0;j<ChartIndiciesLine.length;j++)
			{
			//console.log(hightablesObj.chartIndicies[ChartIndiciesLine[j]])
			highChartline = make2dArrayForHighChartsLine(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesLine[j]],hightablesObj.nameIndex)
			//console.log(highChartline)
			makeHighChartLine(highChartline,hightablesObj.chartNames[ChartIndiciesLine[[j]]])
			}


});





</script>

	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				TrackTables Example
			</div>

			<h1>Preamble</h1>
			<p>Short demo to work with Highcharts, DataTables and dynamically link to IGV</p>

			<h1>Live example</h1>
			<div id="dynamic"></div>
			<div class="spacer"></div>
			<div id="container2" style="height: 300px"></div>
			<div id="container3" style="height: 300px"></div>
			<div id="container4" style="height: 300px"></div>
			<div id="container5" style="height: 300px"></div>
			<button onclick="myFunction()">Try it</button>
			  </body>
<
